<!--  -->
<template>
  <div class="lease-box">
    <div class="flex align-center">
      <div class="font-size-18 font-weight-700 title">租赁状况</div>
      <div class="flex flex-1">
        <div class="flex align-center content-box justify-around">
          <div class="flex align-center">
            <span class="color-666666 cursor-pointer">空间资产出租率<i v-tooltip="'空间资产出租率'" class="icon el-icon-question padding-left-5"></i></span>
            <span class="font-size-20 padding-left-20 flex align-center">{{model.spaceRentalRate || 0}}<span class="font-size-14">%</span></span>
          </div>
          <div class="flex align-center">
            <span class="color-666666">在租资产</span>
            <span class="font-size-20 padding-left-20 flex align-center">{{model.spaceRentedNum || 0}}<span class="font-size-14">个</span></span>
          </div>
          <div class="flex align-center">
            <span class="color-666666">空置</span>
            <span class="font-size-20 padding-left-20 flex align-center">{{model.spaceEmptyNum || 0}}<span class="font-size-14">个</span></span>
          </div>
        </div>
        <div class="split-line"></div>
        <div class="flex align-center content-box justify-around">
          <div class="flex align-center">
            <span class="color-666666 cursor-pointer">广告位出租率<i v-tooltip="'广告位出租率'" class="icon el-icon-question padding-left-5"></i></span>
            <span class="font-size-20 padding-left-20 flex align-center">{{model.flatRentalRate || 0}}<span class="font-size-14">%</span></span>
          </div>
          <div class="flex align-center">
            <span class="color-666666">在租广告位</span>
            <span class="font-size-20 padding-left-20 flex align-center">{{model.flatRentedNum || 0}}<span class="font-size-14">个</span></span>
          </div>
          <div class="flex align-center">
            <span class="color-666666">空置</span>
            <span class="font-size-20 padding-left-20 flex align-center">{{model.flatEmptyNum || 0}}<span class="font-size-14">个</span></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { apiLeaseStateNum } from '@a/about';
  import { accMul } from '@/common/js/utils';

  export default {
    data() {
      return {
        model:{}
      };
    },
    methods: {
      async getSource() {
        let res = await apiLeaseStateNum({ projectKey: localStorage.getItem('projectKey') });
        res.spaceRentalRate = accMul(res.spaceRentalRate,100)
        res.flatRentalRate = accMul(res.flatRentalRate,100)
        this.model = res;
      },
      goDictionary(name) {
        let url = '/businessAssets/dataDic/index?token=1BECA34141E04A338B570F70C780C955&menuId=caa9147d6ba64e1a95bd3eeb76cc5203&parentMenuId=7ee2400d0e72437aa3bdb5823497537f&timestamp=1667202507216&keyWord=' + name;
        window.open(url);
      },
    },

    mounted(){
        this.getSource()
    }
  };
</script>
<style scoped lang="scss">
  .lease-box {
    background: #ffffff;
    padding: 20px;
    margin: 20px 0;
    .title {
      width: 150px;
    }
    .content-box {
      width: 50%;
    }
    .split-line {
      width: 1px;
      height: 25px;
      background: #f1f1f1;
    }
  }

  .shadow-box:hover {
    box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.1);
  }
</style>
